<template>
  <!-- 维修日报 -->
  <div class="Daily">
    <div class="body">
      <div class="g-con">
        <div class="main">
          <div class="title flexsb">
            <div class="flexsc">{{ t('userCenter.t8') }}</div>
            <div>
              <el-button
                type="primary"
                @click="handleAdd()"
              >
                {{ t('userCenter.b5') }}
              </el-button>
            </div>
          </div>

          <div class="grid">
            <div class="left">
              <div class="item">
                <el-select-v2
                  v-model="searchData.shipName"
                  :options="shipOptions"
                  :placeholder="t('invitationQuotation.p2')"
                  clearable
                  filterable
                />
              </div>
              <div class="item time mt-2">
                <div
                  class="li"
                  v-for="(item, index) in timeAxis"
                  :key="index"
                >
                  <div
                    class="y"
                    @click="item.show = !item.show"
                  >
                    {{ item.year }}
                  </div>
                  <el-collapse-transition
                    v-for="item_m in item.months"
                    :key="item_m"
                  >
                    <div
                      class="m"
                      v-show="item.show"
                      @click="handleClickMonth(item, item_m)"
                    >
                      {{ item_m }}
                    </div>
                  </el-collapse-transition>
                </div>
              </div>
            </div>
            <div class="right">
              <div
                class="attr mb-2"
                v-for="item in listData"
                :key="item.id"
              >
                <div class="list">
                  <div class="item">
                    <span>{{ t('userCenter.darrt1') }}:</span><span>{{ dateFormat(item.reportingDate, 3) }}</span>
                  </div>
                  <div class="item">
                    <span>{{ t('userCenter.darrt2') }}:</span><span>{{ item.shipName }}</span>
                  </div>
                  <!-- <div class="item">
                  <span>{{ t('userCenter.darrt3') }}:</span><span>{{ item.dailyItemNum || 0 }}</span>
                </div> -->
                  <div class="item">
                    <span>{{ t('userCenter.darrt4') }}:</span><span>{{ item.pic }}</span>
                  </div>
                </div>
                <div class="flexsc mt-2">
                  <el-button
                    v-if="isCreator(item)"
                    type="primary"
                    @click="handleEdit(item)"
                  >
                    {{ t('userCenter.b2') }}
                  </el-button>
                  <el-button
                    type="primary"
                    @click="handleView(item)"
                  >
                    {{ t('userCenter.b3') }}
                  </el-button>
                  <el-button
                    v-if="isCreator(item)"
                    type="primary"
                    @click="handleAuth(item)"
                  >
                    {{ t('userCenter.b11') }}
                  </el-button>
                  <el-button
                    type="primary"
                    @click="handleExport(item)"
                  >
                    {{ t('export') }}
                  </el-button>
                </div>
              </div>

              <div class="flexcc mt-3">
                <el-pagination
                  layout="prev, pager, next"
                  :hide-on-single-page="total <= page.pageSize"
                  :total="total"
                  v-model:current-page="page.pageNum"
                  :page-size="page.pageSize"
                  @current-change="handleCurrentChange"
                >
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 写日报 -->
    <DailyAdd
      v-if="dailyAddVisible"
      v-model="dailyAddVisible"
      :editId="editId"
      :type="dailyDialogType"
      @getList="getList"
    />

    <!-- 授权查看人 -->
    <AuthView
      v-if="authViewDialog"
      v-model="authViewDialog"
      :obj-id="objId"
      obj-table="shcw_maintenance_daily"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import DailyAdd from './DailyAdd.vue'
import { getListApi, getShippingListApi, getTimeAxisApi, exportDailyApi, validFinishOrderApi } from '@/service/daily'
import { dateFormat, download } from '@/utils'
import moment from 'moment'
import AuthView from '@/components/AuthView.vue'
import useLogin from '@/stores/login'

const router = useRouter()
const route = useRoute()
const { t, locale } = useI18n()

watch(locale, () => {
  init()
})

onBeforeMount(() => {
  init()
})

const storeLogin = useLogin()

// 查询
const searchData = ref({})
watch(
  searchData,
  (n) => {
    getList()
  },
  {
    deep: true
  }
)

// 船舶名称
const shipOptions = ref([])
const getShippingList = () => {
  getShippingListApi().then(({ data }) => {
    shipOptions.value = data.map((r) => {
      return {
        value: r.shippingName,
        label: r.shippingName
      }
    })
  })
}

// 列表
const listData = ref([])
const page = reactive({
  pageNum: 1, // 当前页码
  pageSize: 6 // 每页条数
})
const total = ref(0) // 总数
// 获取数据
const getList = () => {
  getListApi({ ...page, ...searchData.value }).then(({ rows, total: t }) => {
    listData.value = rows
    total.value = t
  })
}
// 分页
const handleCurrentChange = (val) => {
  getList()
}

// 授权查看人
const objId = ref(null)
const authViewDialog = ref(false)
const handleAuth = ({ id }) => {
  authViewDialog.value = true
  objId.value = id
}
const isCreator = ({ createBy }) => {
  return createBy === storeLogin.userInfo.id
}

// 导出
const handleExport = ({ id }) => {
  exportDailyApi({ id }).then((res) => {
    download(res)
  })
}

// 写日报 弹窗
const dailyAddVisible = ref(false)
const dailyDialogType = ref('add') // add edit detail
const editId = ref(null)

// 时间轴
const timeAxis = ref([])
const getTimeAxis = () => {
  getTimeAxisApi().then(({ data }) => {
    data.forEach((item, index) => {
      item.show = index === 0
    })
    timeAxis.value = data
  })
}
const handleClickMonth = ({ year }, m) => {
  searchData.value.startDate = moment(`${year}-${m}`).startOf('month').format('X').valueOf()
  searchData.value.endDate = moment(`${year}-${m}`).endOf('month').format('X').valueOf()
}

// 添加
const handleAdd = () => {
  validFinishOrderApi().then(_ => {
    dailyAddVisible.value = true
    dailyDialogType.value = 'add'
  })
}

// 编辑
const handleEdit = ({ id }) => {
  dailyAddVisible.value = true
  dailyDialogType.value = 'edit'
  editId.value = id
}

// 查看
const handleView = ({ id }) => {
  dailyAddVisible.value = true
  dailyDialogType.value = 'detail'
  editId.value = id
}

//
const init = () => {
  getShippingList()
  getTimeAxis()
  getList()
}
</script>

<style scoped lang="scss">
.Daily {
  .el-button {
    min-width: 140px;
  }
  .body {
    padding: 30px 0 70px;
    background: #f5f5f5;
    margin-bottom: -76px;

    .main {
      background: #fff;
      padding: 25px 35px;

      .title {
        border-bottom: 2px solid #212121;
        padding-bottom: 20px;
        text-transform: uppercase;
        font-weight: bold;
        color: var(--mainColor);
        div {
          font-size: 20px;
        }
      }

      .grid {
        margin-top: 24px;
        display: grid;
        grid-template-columns: 220px auto;
        gap: 25px;

        .left {
          .el-select-v2 {
            width: 100%;
          }

          .time {
            border-left: 1px solid #eaebec;
            padding-left: 10px;

            .y {
              font-size: 16px;
              margin-bottom: 10px;
              position: relative;
              font-weight: bold;
              cursor: pointer;

              &::before {
                content: '';
                display: block;
                width: 10px;
                height: 10px;
                background: var(--mainColor);
                border-radius: 50%;
                position: absolute;
                left: -15px;
                top: 50%;
                transform: translateY(-50%);
              }
            }
            .m {
              margin: 20px 0;
              position: relative;
              cursor: pointer;
              &::before {
                content: '';
                display: block;
                width: 6px;
                height: 6px;
                background: var(--mainColor);
                border-radius: 50%;
                position: absolute;
                left: -14px;
                top: 50%;
                transform: translateY(-50%);
              }
            }
          }
        }
        .right {
          .attr {
            background: #f5f5f5;
            padding: 27px;
            .list {
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              row-gap: 20px;
              span {
                &:first-of-type {
                  color: #9d9fa5;
                  display: inline-block;
                  margin-right: 10px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
